<template>
  <div class="divWarehouseAdd">
    <div class="divForm">
      <el-form :model="formDate" class="demo-ruleForm" :rules="rules">
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item prop="code" label="仓库编码">
              <el-input v-model="formDate.code" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="name" label="仓库名称">
              <el-input placeholder="请输入" v-model="formDate.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="type" label="仓库类型">
              <el-select
                placeholder="请选择"
                v-model="formDate.type"
                style="width: 100%"
              >
                <el-option
                  v-for="item in storeId"
                  :key="item.type"
                  :label="item.value"
                  :value="item.type"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="16">
            <el-form-item prop="location" label="省/市/区">
              <el-cascader
                style="width: 100%"
                size="large"
                :props="{ expandTrigger: 'hover', value: 'label' }"
                :options="options"
                v-model="formDate.location"
              >
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8"> </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="16">
            <el-form-item prop="address" label="详细地址">
              <el-input
                placeholder="请输入"
                v-model="formDate.address"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="status" label="仓库状态">
              <el-radio-group style="width: 100%" v-model="formDate.status">
                <!-- <div style="width:100px"> -->
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">停用</el-radio>
              </el-radio-group>
              <!-- </div> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item prop="surface" label="仓库面积">
              <el-input v-model="formDate.surface">
                <template slot="append">m³</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="personName" label="负责人">
              <el-input
                placeholder="请输入"
                v-model="formDate.personName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="phone" label="联系电话">
              <el-input
                placeholder="请输入"
                v-model="formDate.phone"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="buttonBox">
      <button class="unimportanceButton" @click="$router.push('manage')">
        返回
      </button>
      <button class="minorImportantButton" @click="addStore">提交</button>
    </div>
  </div>
</template>

<script>
import { addStore, editstroe, getCK } from '@/api/index'
import hireType from '@/constant/hireType'
import { regionData } from 'element-china-area-data'

export default {
  data () {
    return {
      value: 'CK001990',
      formDate: {
        code: '',
        name: '',
        status: '',
        location: '',
        type: '',
        address: '',
        phone: '',
        personName: '',
        surface: '',
        area: '',
        city: '',
        province: ''
      },
      options: regionData,

      storeId: hireType.storeType,
      statusId: hireType.hireType,
      rules: {
        name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
        type: [{ required: true, trigger: 'blur' }],
        location: [{ required: true, trigger: 'blur' }],
        status: [{ required: true, trigger: 'blur' }],
        personName: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ],
        phone: [
          { min: 7, max: 11, message: '请输入正确的电话号码', trigger: 'blur' }
        ]
      }
    }
  },
  async created () {
    // this.formDate.code
    const {
      data: { data }
    } = await getCK()
    this.formDate.code = data
    if (this.$route.query.id) {
      this.getDetails()
    }
  },
  methods: {
    async addStore () {
      if (this.formDate.id) {
        // this.getDetails()
        await editstroe(this.formDate)
      } else {
        this.formDate.area = this.formDate.location[2]
        this.formDate.city = this.formDate.location[1]
        this.formDate.province = this.formDate.location[0]
        this.formDate.location = JSON.stringify(
          this.formDate.location.join('/')
        )
        await addStore(this.formDate)
      }
      this.$message.success('恭喜你,提交成功')
      this.$router.go(-1)
      // console.log(this.formDate.location)
    },
    async getDetails () {
      const {
        data: { data }
      } = await editstroe(this.$route.query)
      // console.log(data)
      this.formDate = { ...data }
    }
  }
}
</script>

<style lang="less" scoped>

  .el-col{
  height: 100px;
  }
.divWarehouseAdd {
  height: 509px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  padding-top: 31px;
  padding-bottom: 30px;
  .divForm {
    padding-left: 30px;
    padding-right: 30px;
    /deep/.el-form-item__label {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #887e7e;
    }
    .el-input {
      background-color: #f8f5f5;
      border-color: #f3ebeb;
      width: 100%;
      color: #b5abab;
      height: 40px;
      line-height: 40px;
      border: 1px solid #f8f5f5;
      border-radius: 6px;
      /deep/.el-input__inner {
        background: #f8f5f5 !important;
      }
    }
    .is-disabled {
      font-size: 14px;
      /deep/.el-input__inner {
        background: #f3ebeb !important;
      }
    }
  }
  /deep/.el-input {
    background-color: #f8f5f5;
    border-color: #f3ebeb;
    width: 100%;
    color: #b5abab;
    height: 40px;
    line-height: 40px;
    border: 1px solid #f8f5f5;
    border-radius: 6px;
    .el-input__inner {
      background-color: #f8f5f5 !important;
    }
  }
  .buttonBox {
    padding: 25px 0 0;
    margin: 0 -30px -5px;
    border-top: 1px solid #f5efee;
    text-align: center;
    .unimportanceButton {
      height: 40px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
      width: 170px;
      margin: 0 15px;
    }
    .minorImportantButton {
      background: #ffb200;
      color: #332929;
      height: 40px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
      width: 170px;
      margin: 0 15px;
    }
  }
}
</style>
